import React from 'react'
import { DownOutlined, UserOutlined } from '@ant-design/icons'
import { Dropdown, Button, Space, Menu } from "antd";
import { useAppDispatch, useAppSelector } from '../../app/hooks';
import { verifyFail } from '../../app/user/userSlice'
export const UserMenuDown = () => {
	const user_name = useAppSelector(state => state.user.userInfo.user_name)
	const dispatch = useAppDispatch()
	const handleMenuClick = e => {
		if (e.key === "4") {
			dispatch(verifyFail())
		}
	};
	const menu = (
		<Menu
			onClick={handleMenuClick}
			items={[
				{
					label: '用户信息',
					key: '1',
					icon: <UserOutlined />,
				},
				{
					label: '浏览记录',
					key: '2',
					icon: <UserOutlined />,
				},
				{
					label: '设置',
					key: '3',
					icon: <UserOutlined />,
				},
				{
					label: '退出登录',
					key: '4',
					icon: <UserOutlined />,
				},
			]}
		/>
	);

	return (
		<Dropdown overlay={menu}>
			<Button>
				<Space>
					{user_name}
					<DownOutlined />
				</Space>
			</Button>
		</Dropdown>
	)
}